top{
    display: block;
    background: url(../imgs/banner-xiangliao.jpg) no-repeat;
    width: 100%;
    height: 485px;
    background-size: 100% 100%;
    /*box-shadow:0px 15px 10px -15px #ccc;*/
}
.xiangliao-wrapper{
    background: url("../imgs/xiangliao-mountain-bg.jpg") no-repeat;
    background-size: 100% 100%;
}
.xiangliao-top{
    width: 70%;
    margin: 0 auto;
    padding: 50px 30px;
}
.top-txt{
    font-size: 21px;
    text-indent: 2em;
    text-align: justify;
    transform: translateY(50%);
}
.txt-pic{
    width: 73%;
    transform: translateY(25%);
}

.perches-xiangliao{
    position: relative;
    background: url("../imgs/perches-hanyuan-huajiao.png") no-repeat;
    background-size: 100% 100%;
}
.xiangliao-perches-cont{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
    font-size: 20px;
    display: inline-table;
}
.xiangliao-txt-line1{
    color: #515151;
    margin-bottom: 8px;
}
.xiangliao-txt-line2{
    font-size: 25px;
}

.xiangliao-bot{
    width: 70%;
    margin: 0 auto;
    padding: 40px 30px;
}
.bot-title-wrapper {
    margin-bottom: 30px;
    text-align: center;
}
.bot-title-wrapper img {
    width: 28%;
}
.orange-bg-title {
    width: 22%;
    margin: 0 auto;
    padding: 4px 8px;
    background: #F6BB6D;
    color: #860707;
    font-size: 24px;
    margin-top: 10px;
}
.xiangliao-sort-intro-detail{
    padding: 20px;
    border: 1px solid #D3D3D3;
}
.sort-tab span{
    display: inline-block;
    width: 13%;
    margin-right: 2.9%;
    padding: 5px 8px;
    color: #5B5B5B;
    font-size: 25px;
    box-shadow: 0 5px 12px #C3C3C3;
    text-align: center;
    background: #fff;
}
.sort-tab span:last-child{
    margin-right: 0;
}
.sort-tab .active{
    background: #F6BB6D;
    color: #333;
}
.sort-top-txt{
    padding: 25px 20px;
    text-indent: 2em;
    font-size: 21px;
    text-align: justify;
    line-height: 22px;
    border-bottom: 1px solid #E3E3E3;
}
.sort-bot-txt{
    padding: 16px 20px 0 20px;
    text-indent: 2em;
    font-size: 18px;
    text-align: justify;
    line-height: 22px;
    color: #848484;
}
.sort-tab span:hover{
    cursor: pointer;
}


/*view of phone*/
@media ( max-width: 500px) {
    top {
        height: 201px;
    }
    .xiangliao-top {
        width: 100%;
        padding: 30px;
    }
    .top-txt {
        transform: translateY(10%);
    }
    .xiangliao-perches-cont {
        font-size: 14px;
        width: 85%;
    }
    .xiangliao-txt-line2 {
        font-size: 18px;
    }
    .xiangliao-txt-line1 {
        margin-bottom: 4px;
    }
    .xiangliao-bot {
        width: 100%;
        padding: 30px;
    }
    .bot-title-wrapper img {
        width: 75%;
    }
    .orange-bg-title {
        width: 65%;
    }
    .xiangliao-sort-intro-detail {
        padding: 12px;
    }
    .sort-tab span {
        margin-right: 1.5%;
    }
}